import 'package:flutter/material.dart';
import 'package:learning/constants/app_icons.dart';
import 'package:learning/constants/app_strings.dart';
import 'package:learning/pages/main_tab/account/account_page_logic.dart';
import 'package:provider/provider.dart';

class AccountPage extends StatefulWidget {
  const AccountPage({super.key});

  @override
  State<AccountPage> createState() => _AccountPageState();
}

class _AccountPageState extends State<AccountPage> {
  // 个人信息页面的第一部分
  Widget _buildFirstSection() {
    const divider = Divider(
      height: 0.5,
      indent: 50,
      endIndent: 15,
      color: Colors.grey,
    );
    return Card(
      child: Column(
        children: [
          _ListViewCell(
            icon: Icons.info,
            title: AppStrings.aboutLearning,
            onTap: () {},
          ),
          divider,
          _ListViewCell(
            icon: Icons.support_outlined,
            title: AppStrings.welcomePage,
            onTap: () {},
          ),
          divider,
          _ListViewCell(
            icon: Icons.star_rate,
            title: AppStrings.ratingMe,
            onTap: () {},
          ),
          divider,
          _ListViewCell(
            icon: Icons.edit,
            title: AppStrings.editProfile,
            onTap: () {},
          ),
        ],
      ),
    );
  }

// 个人信息页面的第二部分
  Widget _buildSecondSection() {
    const divider = Divider(
      height: 0.5,
      indent: 50,
      endIndent: 15,
      color: Colors.grey,
    );
    return Card(
      child: Column(
        children: [
          _ListViewCell(
            icon: Icons.shopping_cart_outlined,
            title: AppStrings.shoppingCart,
            onTap: () {},
          ),
          divider,
          _ListViewCell(
            icon: Icons.assessment,
            title: AppStrings.myOrder,
            onTap: () {},
          ),
          divider,
          _ListViewCell(
            icon: Icons.favorite,
            title: AppStrings.favoriteCourse,
            onTap: () {},
          ),
        ],
      ),
    );
  }

  // 退出登录
  Widget _buildExitRow(BuildContext context) {
    return Selector<AccountPageLogic, bool>(
        builder: (context, v, child) {
          if (v) {
            return Column(
              children: [
                const SizedBox(height: 20),
                Card(
                  child: _ListViewCell(
                      icon: Icons.exit_to_app,
                      title: AppStrings.logout,
                      onTap: () {}),
                )
              ],
            );
          } else {
            return const SizedBox.shrink();
          }
        },
        selector: (context, logic) => logic.isLoggedIn);
  }

  @override
  void initState() {
    super.initState();
    context.read<AccountPageLogic>().init();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: ScrollConfiguration(
        behavior: const ScrollBehavior().copyWith(scrollbars: false),
        child: ListView(
          children: [
            const SizedBox(height: 10),
            const _NoneLogginHeader(),
            const SizedBox(height: 30),
            _buildSecondSection(),
            const SizedBox(height: 20),
            _buildFirstSection(),
            const SizedBox(height: 10),
            _buildExitRow(context),
          ],
        ),
      ),
    ));
  }
}

// 个人信息页面的列表项
class _ListViewCell extends StatelessWidget {
  final IconData icon;
  final String title;
  final GestureTapCallback onTap;

  const _ListViewCell(
      {required this.icon, required this.title, required this.onTap});

  @override
  Widget build(BuildContext context) {
    final style = Theme.of(context)
        .textTheme
        .titleLarge
        ?.copyWith(fontWeight: FontWeight.w600, fontSize: 16);
    return InkWell(
      onTap: onTap,
      child: ListTile(
        leading: Icon(
          icon,
          color: Theme.of(context).textTheme.titleLarge?.color,
          size: 20,
        ),
        title: Text(title, style: style),
        onTap: null,
        trailing: const Icon(
          Icons.arrow_forward_ios,
          size: 16,
          color: Colors.grey,
        ),
      ),
    );
  }
}

class _NoneLogginHeader extends StatelessWidget {
  const _NoneLogginHeader();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('点击登录');
      },
      child: Container(
        color: Theme.of(context).scaffoldBackgroundColor, // 背景颜色
        child: Row(
          children: [
            SizedBox(
              height: 60,
              width: 60,
              child: CircleAvatar(
                radius: 30,
                backgroundColor: Theme.of(context).colorScheme.surface,
                child: ColorFiltered(
                  colorFilter:
                      ColorFilter.mode(Colors.grey[600]!, BlendMode.srcIn),
                  child: Image.asset(AppIcons.greyAvatar),
                ),
              ),
            ),
            const SizedBox(width: 16),
            SizedBox(
              height: 60,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    AppStrings.clickLogin,
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                  const SizedBox(height: 5),
                  Text(
                    AppStrings.welcomeLogin,
                    style: Theme.of(context)
                        .textTheme
                        .bodyMedium
                        ?.copyWith(color: Colors.grey),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _Footer extends StatelessWidget {
  const _Footer();

  @override
  Widget build(BuildContext context) {
    final style =
        Theme.of(context).textTheme.bodySmall?.copyWith(color: Colors.grey);
    return Column(children: [
      Text(
        'www.learning.com',
        style: style,
      ),
      const SizedBox(height: 10),
    ]);
  }
}
